<template>
  <!--
  @name: HyElDate
  @data: 2024/4/16 16:03
  二次封装el-date-picker
  注意,这里我们只封装单个时间,多选的时间可以使用另外一个组件

-->
  <div id="hy-el-date">
    <span v-if="isReadonly">{{form[props.field]}}</span>
    <el-date-picker
      v-else
      :id="props.id as any"
      :style="props.inputStyle"
      v-model="form[props.field]"
      :type="props.type as any"
      :placeholder="props.placeholder"
      :start-placeholder="props.startPlaceholder"
      :end-placeholder="props.endPlaceholder"
      :size="props.size as any"
      :disabled="props.isDisabled"
      :format="props.dateFormat as any"
      :value-format="props.valueFormat as any"
      :unlink-panels="props.isUnlinkPanels"
      :prefix-icon="props.prefixIcon"
      :clear-icon="props.clearIcon"
      :shortcuts="props.shortcuts"
      :validate-event="props.isValidateEvent"
      :range-separator="props.rangeSeparator as any"
      :clearable="props.clearable"
      @change="hyElDateChange"
    />
  </div>
</template>
<script setup lang="ts">
import {computed} from "vue";
import type {HyDateFormItemInterface} from "@/interface/HyFormInterface";
const props = defineProps<HyDateFormItemInterface>();
// const props = defineProps({
//   /**-------------以下是HyElDate自定义属性----------------*/
//   // form:{
//   //   type:Object,
//   //   default:()=>{}
//   // },
//   isReadonly:{
//     type: Boolean,
//     default: false,
//   },
//   name:{
//     type: String,
//   },
//   /**
//    * 提交给后端的字段,也是前端用来展示属性
//    */
//   field: {
//     type: String,
//     default: ""
//   },
//   startDateField:{
//     type: String,
//     default: "startDate"
//   },
//   endDateField:{
//     type: String,
//     default: "endDate"
//   },
//   /** 请求路径 */
//   url: {
//     type: String,
//   },
//   //请求方式
//   method: {
//     type: String,
//     default: "GET"
//   },
//   //请求的query参数
//   params: {
//     type: Object,
//     default: () => {
//     }
//   },
//   /**
//    * @description 请求的data参数
//    */
//   data: {
//     type: Object,
//     default: () => {
//     }
//   },
//   /**--------------------------------------------------*/
//   /**
//    * @description native input id
//    */
//   id: {
//     type: String,
//     default: undefined,
//   },
//   /**
//    * @description input box size
//    */
//   size: {
//     type: String,
//     default: "default"
//   },
//   /**
//    * @description whether to disable
//    */
//   disabled: Boolean,
//   /**
//    * @description binding value
//    */
//   modelValue: {
//     type: String,
//     default: '',
//   },
//   /**
//    * @description type of input
//    */
//   type: {
//     type: String,
//     default: 'date',
//   },
//   //日期显示格式化
//   dateFormat: String,
//   //时间显示格式化
//   timeFormat: String,
//   //返回值格式化
//   valueFormat: {
//     type: String,
//     default: 'YYYY-MM-DD'
//   },
//   //文本框可输入
//   editable: {
//     type: Boolean,
//     default: true,
//   },
//   /**
//    * @description format content
//    */
//   formatter: {
//     type: Function,
//     default: 'YYYY-MM-DD'
//   },
//   /**  placeholder非范围选择时的占位内容 */
//   placeholder: {
//     type: String,
//   },
//   //范围选择时开始日期的占位内容
//   startPlaceholder: {
//     type: String,
//   },
//   //范围选择时结束日期的占位内容
//   endPlaceholder: {
//     type: String
//   },
//   //选择范围时的分隔符
//   rangeSeparator: {
//     type: String
//   },
//   shortcuts:{
//     type:Array,
//     default:()=>{return []}
//   },
//   //是否显示清除按钮
//   clearable: {
//     type: Boolean,
//     default: false,
//   },
//   //清除按钮icon,
//   clearIcon: {},
//   //自定义前缀图标
//   prefixIcon: {},
//   //是否触发表单验证
//   validateEvent: {
//     type: Boolean,
//     default: true,
//   },
//   unlinkPanels: {
//     type: Boolean,
//     default: false
//   },
//   focus: Function,
//   blur: Function,
//   //当用户确认选定的值时触发
//   change: {
//     type:Function,
//     default:()=>{},
//   },
//   requestCallback: Function,
//   responseCallback: Function,
//   regExpCallback: Function,
// });

/** 双向绑定 */
const form = defineModel("form", {
  type: Object,
  default: () => {
  },
});
/**
 * 关于使用HyElDate时,选择区间的方式
 * 如果传入了 startDateField 和 endDateField
 * 那么，我们的 props.field 将赋值为 undefined
 */
function hyElDateChange(value:string) {
  console.log(200, value);
  if (props.type==='daterange'){
    /** 整理数据,这里我们暂时不把源数据置为undefined,等到后期再看 */
    if (props.startDateField && props.endDateField){
      form.value[props.startDateField]=form.value[props.field][0];
      form.value[props.endDateField]=form.value[props.field][1];
      if(props.onChange){
        props.onChange(value,form.value[props.startDateField],form.value[props.endDateField]);
      }
    }else{
      console.error("缺少必填字段 startDateField 或 endDateField");
    }

    /** 置为undefined, 这里置为undefined时，如果无法重新赋值 */
    // form.value[props.field]=undefined;
  }
}

</script>
<style scoped>

</style>
